﻿@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Web site</title>
    <link id="theme" rel="stylesheet" type="text/css" href="../../Content/styletemplate.css" title="theme" />
    <!--Script tabs-->
    <link rel="stylesheet" href="../../Content/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../Scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxcore.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxtabs.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxbuttons.js"></script>

      <!--Script popup-->
    <script type="text/javascript" charset="utf-8" src="../../Scripts/popbox.js"></script>
        <link rel='stylesheet' href="../../Content/popbox.css" type='text/css'/>

    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var addButton,
                addButtonWidth = 29;
            // create jqxTabs.
            var index = 0;
            $('#jqxTabs').jqxTabs({ height: 530, width: 635, theme: theme, showCloseButtons: true });
            //
            $('#jqxTabsfb').jqxTabs({ height: 635, width: 530, theme: theme, showCloseButtons: true });
            var indexfb = 0;
            $('#jqxTabsfb').bind('tabclick', function (event) {
                if (event.args.item == $('#unorderedListfb').find('li').length - 1) {
                    var length = $('#unorderedListfb').find('li').length;
                    $('#jqxTabsfb').jqxTabs('addAt', event.args.item, 'Sample title ' + indexfb, 'Sample content number: ' + indexfb);
                    indexfb++;
                }
            });
            ///
            var data = new Array();
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];

            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row["firstname"] = firstNames[i];
                row["lastname"] = lastNames[i];
                row["title"] = titles[i];
                data[i] = row;
            }

            var source =
                     {
                         localdata: data,
                         datatype: "array"
                     };

            var dataAdapter = new $.jqx.dataAdapter(source);



            $('#listbox').bind('select', function (event) {
                index = event.args.index;
            });

            $('#listbox').bind('dblclick', function (event) {
                $('#jqxTabs').jqxTabs('addAt', 0, index, 'Sample content number: ');
                $('.jqx-tabs-close-button').first().attr('id', "tab" + index);
                $('#tab' + index).bind('click', function () {
                    alert("1");
                });
            });
            $('#listbox').jqxListBox({
                selectedIndex: 0, theme: 'fresh', source: dataAdapter, displayMember: "firstname", itemHeight: 70, height: 500, width: 270,
                renderer: function (index, label, value) {
                    var datarecord = data[index];
                    var imgurl = '../../images/' + label.toLowerCase() + '.png';
                    var img = '<img height="50" width="45" src="' + imgurl + '"/>';
                    var table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
                    return table;
                }
            });

            $('#listboxfb').bind('dblclick', function (event) {

            });

            $('#listboxfb').jqxListBox({
                selectedIndex: 0, theme: 'fresh', source: dataAdapter, displayMember: "firstname", itemHeight: 70, height: 420, width: 230,
                renderer: function (index, label, value) {
                    var datarecord = data[index];
                    var imgurl = '../../images/' + label.toLowerCase() + '.png';
                    var img = '<img height="50" width="45" src="' + imgurl + '"/>';
                    var table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
                    return table;
                }
            });
        });



        function FbButton_onclick() {
            var text = document.getElementById('jimbobsteve').value;
            $("#1").append("<p> Duong : " + text + "</p>")
            $.ajax({
                type: "POST",
                url: "FBChat/SendFacebook",
                data: { SendText: text },
                success: function () {
                    
                }
            });
        }



        //Pop up invoke
        $(document).ready(function () {
            $('.popbox').popbox();
        });

        $(document).ready(function () {
            $('.popbox').popbox({
                'open': '.open',
                'box': '.box',
                'arrow': '.arrow',
                'arrow-border': '.arrow-border',
                'close': '.close'
            });
        });


//        (function poll() {
//            $.ajax({ url: "FBChat/getNewMesssage", success: function (data) {
//                //Update your dashboard gauge
//                var a = data;
//                if(a == "Failed"){
//                alert(a);
//                }
//            }, dataType: 'json', complete: poll, timeout: 30000
//            });
//        })();


        (function poll() {
            setTimeout(function () {
                $.ajax({
                    dataType: 'json',
                    url: 'FBChat/getNewMesssage',
                    success: function (data) {
                        var a = data;
                        if (a != "Failed") {
                            $("#1").append( "<p>Tui ne : " + a + "</p>");
                        }
                    },
                    complete: poll,
                    dataType: 'json',
                    timeout: 30000
                });
            }, 5000);
        })();


    </script>

    <!--Script menu-->
    <link rel="stylesheet" href="../../Content/jqx.fresh.css" type="text/css" />
    <script type="text/javascript" src="../../Scripts/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxdata.js"></script>
    <script type="text/javascript" src="../../Scripts/jqxscrollbar.js"></script>
  </head>
  <body> 

          <div class='popbox'>
            <a class='open' href='#'>Click Here!</a>

          <div class='collapse'>
            <div class='box'>
              <div class='arrow'></div>
              <div class='arrow-border'></div>

              Content in PopBox goes here :)
              <a href="#" class="close">close</a>
            </div>
          </div>
        </div>

    <!-- top wrapper -->  
    <div id="topWrapper"> 
      <div id="topBannerWrapper"> 
        <div id="topBanner">
        <h1>WEB CHAT</h1>
          <div id="hmenuWrapper"> 
            <div id="hmenu"> 
              <ul>
                <li>
                  <a href="/Chat">Home-Chat</a>
                </li>
                <li>
                  <a href="/FBChat">Facebook Chat</a>
                </li>
                <li>
                  <a href="/Profile">My Profile</a>
                </li>
                <li>
                  <a href="/LogOut">Log Out</a>
                </li>
                <li>
                  <a href="/Home">About</a>
                </li>
              </ul> 
            </div> 
          </div> 
        </div> 
      </div>  
    </div>  
    <!-- end top wrapper -->  
    <div id="wrapper"> 
      <div id="container" style="background:Black"> 
        <!--  content -->  
        <div id="content" > 
            <div style="width: 30%; height: 100%; float: left">
                        <h1 style="color:White">Friends List</h1>
                        <div id="listbox">
                        </div>
                    </div>
                    <!--Chat box-->
                    <div style="width: 70%; height: 100%; float: right">
                    <br /><br />
                        <div id='jqxTabs' style="float: left;">
                            <ul style="margin-left: 30px;" id="unorderedList">
                                <li>Node.js</li>
                                <li canselect='false' style='padding: 5px; font-style: italic; font-size: 14px; border: none;
                                    background: transparent; display:none' hasclosebutton='false'>+</li>
                            </ul>
                            <div>
                                <div>
                                <div id="1" style="height: 400px; background-color: #ADADAD;">
                                </div>
                                <div>
                                <form action="" name="textchat" method="post">
                                    <div style="float:left;">
                                     <textarea name="chattext" id = "jimbobsteve" rows="5" cols="63"></textarea>
                                    </div>
                                    
                                    <input type="button" onclick="FbButton_onclick();" name="submit_fb" value="Send to facebook"
                                        class="bt_login" style="width: 50px;height: 40px;"/>
                                </form>
                  

                                </div>
                                </div>
                                <div>
                                
                                </div>
                            </div>
                            <div>
                            </div>
                        </div>
                    </div>
        </div>  
        <!-- end content -->  
        <div class="clear" style="height:40px"></div> 
      </div>  
      <!-- end container --> 
    </div>   
  </body>
</html>
